﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Panes sample</title>
<script language="javascript" type="text/javascript" src="../../lib/prototype.js" ></script>
<script language="javascript" type="text/javascript" src="../../lib/effects.js" ></script>
<script language="javascript" type="text/javascript" src="../../src/logger.js" ></script>
<script language="javascript" type="text/javascript" src="../../src/prototype_ext.js" ></script>
<script language="javascript" type="text/javascript" src="../../src/pane.js" ></script>
</head>
<body>

	<div id="pane1" style="position:absolute; top:0px;left:0px; width:200px;">
		<div id="pane1_title" style="background-color:#EEDDFF;">
			<a id="pane1_open" href="javascript:void(0)">+</a>
			<a id="pane1_close" href="javascript:void(0)">-</a>
			ClosablePanes
		</div>
		<div id="pane1_body" style="background-color:#FFDDEE;">
			あああああああああ
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			おおおおおおおおお
		</div>
	</div>
<script language="javascript" type="text/javascript" ><!--
    Logger.setActiveOnLoad(true);

	new Pane.Draggable( "pane1_title", "pane1" );
	var pane = new Pane.Closable( "pane1_open", "pane1_close", ["pane1_body"] );
	pane.open();
--></script>
	
	<div id="pane2" style="position:absolute; top:50px;left:50px; width:200px; z-index:100;">
		<div id="pane2_title" style="background-color:#EEDDFF;z-index:100;">
			<input type="checkbox" id="pane2_check" checked="checked"/>
			CheckingClosablePanes
		</div>
		<div id="pane2_body" style="background-color:#FFDDEE;z-index:100;">
			あああああああああ
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			おおおおおおおおお
		</div>
	</div>
<script language="javascript" type="text/javascript" ><!--
	new Pane.Draggable( "pane2_title", "pane2" );
	var pane = new Pane.CheckingClosable( "pane2_check", ["pane2_body"] );
	pane.open();
	new Pane.PositionKeeper($("pane2"), 300);
--></script>
	
	<div id="pane3" style="position:absolute; top:100px;left:100px; width:200px; z-index:100;">
		<div id="pane3_title" style="background-color:#EEDDFF;">
			<select id="pane3_select">
				<option value="a">ああああああ</a>
				<option value="b">いいいいいい</a>
				<option value="c">うううううう</a>
			</select>
			SelectClosablePanes
		</div>
		<div id="pane3_body1" style="background-color:#FFDDEE;">
			あああああああああ
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			おおおおおおおおお
		</div>
		<div id="pane3_body2" style="background-color:#CCDDEE;">
			いいいいいいいいい
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			えええええええええ
		</div>
		<div id="pane3_body3" style="background-color:#CCBBAA;">
			ううううううううう
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			んんんんんんんんん
		</div>
	</div>
<script language="javascript" type="text/javascript" ><!--
	var pane = new Pane.SelectClosable( "pane3_select" );
	pane.addByValue("a",  ["pane3_body1"]);
	pane.addByValue("b",  ["pane3_body2"]);
	pane.addByValue("c",  ["pane3_body3"]);
	pane.refresh();
	new Pane.Draggable( "pane3_title", "pane3" );
--></script>
	
	
	<form id="f">
		KeyLimit: abcdefghijklmnop-@#4 <input type="text" id="text1"/><br/>
		NumberKeyLimit(-可、+不可、整数部4桁、小数部3桁) <input type="text" id="text2"/><br/>
		CurrencyLimit(-可、+不可、整数部4桁、小数部3桁)<input type="text" id="text3"/><br/>
	</form>
	<div>
     <div style="float:left">ウ往々往々往々<br/>往々往々往々往々<br/>おうおうおうおうおうおうおうお</div>
	   <div id="floating_pane_base" style="float:left; border: 1px solid black;">
	       <table><tr>
	       <td id="floating_pane_title" style="background-color:#789abc">&nbsp;&nbsp;&nbsp;&nbsp;</td>
	       <td nowrap="nowrap"><label>サンプル</label><input type="text" id="sample_txt" value=""/></td>
	       </tr></table>
	   </div>
     <div style="float:left">えええ<br/>ええええええ<br/>えええええええ<br/>ええええええ</div>
     <div style="clear:left"></div>
	</div>
<script language="javascript" type="text/javascript" ><!--
    Event.observe(window, "load", function(event) {
	    var fp = $("floating_pane_base");
	    Position.absolutize(fp);
    	new Pane.PositionKeeper(fp, 300);
    	new Pane.Draggable( $("floating_pane_title"), fp );
	  }, false);
--></script>
	
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="javascript:void(0);" id="centering">centering</a>
<script language="javascript" type="text/javascript" ><!--
	Event.observe($("centering"), "click", function(event) {
		HTMLElement.centering($("pane1"));
		HTMLElement.bringToFront($("pane1"));
	}, false);
--></script>
    
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="javascript:void(0);" id="log_body">log body</a>
<script language="javascript" type="text/javascript" ><!--
	Event.observe($("log_body"), "click", function(event) {
    	logger.debug("document.body", document.body, 2);
    }, false);
--></script>
</body>
</html>
